<template>
	<div class="main">
		<div class="mgt"></div>
		<van-search v-model="keyword" :clearable="false" placeholder="  搜索">
			<template #left-icon><van-icon/></template>
			<template #right-icon>
				<img :src="serchicon" class="searchicon" alt="">
			</template>
		</van-search>
		<!-- 搜索框 -->
			
		<div class="fullscroll">
			<swipe :bannerArr="bannerdata" v-if="bannerdata.length>0"/>
			<!-- 轮播图 -->
			
			<activityclass :activityData="activityArr"/>
			<!-- banner -->

			<van-row>
				<div class="goods-title-icon">
					<div class="goods-title-field">
						<div class="goods-title-hr" />
					</div>
					<div class="goods-title-icon-field">
						<div><img src="../../assets/img/jingpin.png" class="goods-title-icon-field-img" alt=""></div>
					</div>
					<div class="goods-title-field">
						<div class="goods-title-hr" />
					</div>
				</div>
				<div class="goods-title">至臻潮品</div>
			</van-row>
			<!-- 商品标题 -->
			
			<van-row>
				<van-list
					v-model="toloading"
					:finished="finished"
					finished-text="没有更多了" :offset="10"
					@load="onLoad">
					<div class="goot-list">
						<div class="good-item" v-for="(item,index) in goodListArr" :key="index" @click="JumpDetails(item.goods_id)">
							<span class="good-item-title">{{item.brand}}</span>
							<div class="good-item-img" :style="{background:`url(${item.image})`}"></div>
							<span class="good-name">{{item.series}}</span>
							<span class="good-admin-pay">官方售价:<span class="good-admin-pay-item"><img class="" src="../../assets/img/payblack.png" alt="">{{item.market_price}}</span></span>
							<span class="good-go-pay">GO价: <span class="good-go-pay-item"><img class="" src="../../assets/img/payred.png" alt="">{{item.price}}</span></span>
						</div>
					</div>
				</van-list>
			</van-row>
			<!-- 商品 -->
			
			<menubtn ref="menuredbtn"/>
			
			<img class="callbackxxx" src="../../assets/img/backtop.png" v-if="btnFlag" @click="backtop" alt="">
		</div>
	</div>
</template>

<script>
import {_getWxLogin,_WeChatLogin,_getjsapiticket} from '../../service/wxService.js'

import {_ajaxBanner,_ajaxCate,_ajaxGoods} from '../../service/main.js'
import swipe from "../../components/swipe.vue"
import menubtn from "../../components/menubtn.vue"
// import goodslist from '../../components/goodslist.vue'
import activityclass from '../../components/ActivityClass.vue'
	export default{
		name:"index",
		data(){
			return{
				serchicon:require('../../assets/img/searchicon.png'),
				keyword:"",
				bannerdata:[],
				activityArr:[],
				goodListArr:[],
				toloading:false,
				finished:false,
				page:1,
				btnFlag:false,
				wxcimss:"",
			}
		},
		components:{
			swipe,
			menubtn,
			// goodslist,
			activityclass
		},
		beforeCreate(){
			// _getWxLogin()
		},
		created(){
			if(this.$store.state.HomePage.scrollTop>0){
				document.documentElement.scrollTop=this.$store.state.HomePage.scrollTop
			}
			this.getbanner()
			this.getactivity()
			if(true){
				this.getgoodslist()
			}
			// this.getWxCode()
			this.getWxjsapi()
		},
		activated(){
			if(this.$store.state.HomePage.scrollTop>0){
				document.documentElement.scrollTop=this.$store.state.HomePage.scrollTop
			}
		},
		mounted(){
			// window.addEventListener('scroll', this.scrollToTop)
			document.addEventListener('scroll',this.handelscroll)
		},
		deactivated (){
			localStorage.setItem('scrollTop',this.scrollTop)
		},
		activated () {
			document.body.scrollTop =document.documentElement.scrollTop = window.pageYOffset =localStorage.getItem('scrollTop')
		},
		destroyed(){
			// window.removeEventListener('scroll', this.scrollToTop)
		},
		methods:{
			handelscroll() {
				this.scrollTop = document.body.scrollTop|| document.documentElement.scrollTop || window.pageYOffset
			},
			getWxCode(){
				// let _this=this
				// let uri=window.location.href
				// let param=new URLSearchParams(uri.split("?")[1])
				// let code=param.get("code")
				// let code="0812uQ8i0si5lu1ZfN8i0V8V8i02uQ8O"
				// console.log(code)
				// _WeChatLogin({code:code}).then(res=>{
				// 	console.log(res)
				// 	if(res.errcode==1&&res.message=="授权成功"){
				// 		localStorage.setItem("WxUserInfo",JSON.stringify(res.data))
				// 	}else{
				// 		_this.$toast.fail("微信网页授权失败："+res.message);
				// 	}
				// })
				
			},
			async getWxjsapi(){
				//用access_token获取jsapi_ticket
				let _this=this
				let access_token="http://market.starrymedia.vip/indexs"
				// JSON.parse(localStorage.getItem("WxUserInfo")).access_token
				// let uri=window.location.href
				// let param=new URLSearchParams(uri.split("?")[1])
				// let code=param.get("code")
				// await _WeChatLogin({code:code}).then(res=>{
				// 	console.log("_WeChatLogin",res)
				// 	if(res.errcode==1&&res.message=="授权成功"){
				// 		localStorage.setItem("WxUserInfo",JSON.stringify(res.data))
				// 		access_token=res.data.access_token
				// 	}else{
				// 		_this.$toast.fail("微信网页授权失败："+res.message);
				// 	}
				// })

				await _getjsapiticket(access_token).then(res=>{
					console.log("_getjsapiticket",res)
					if(res.errcode==1){
						localStorage.setItem("WXjsapi_ticket",JSON.stringify(res.data))
						wx.config({
							debug: true, 
							appId: res.data.appid, // 必填，公众号的唯一标识
							timestamp: res.data.timestamp, // 必填，生成签名的时间戳
							nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
							signature: res.data.signature,// 必填，签名，见附录1
							jsApiList: [
								"uploadImage","chooseImage","chooseWXPay"
							]
						});
					}
				})

				wx.ready(function(){
					console.log("0xc000000000000000000000000")
				});
			},
			backtop(){
				const _this = this
				let timer = setInterval(() => {
					let ispeed = Math.floor(-_this.scrollTop / 5)
					document.documentElement.scrollTop = document.body.scrollTop = _this.scrollTop + ispeed
					if (_this.scrollTop === 0) {
						clearInterval(timer)
					}
				}, 16)
			},
			scrollToTop () {
				const _this = this
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				_this.scrollTop = scrollTop
				if (_this.scrollTop > 60) {
					_this.btnFlag = true
				} else {
					_this.btnFlag = false
				}
			},
			JumpDetails(id){
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				this.$store.state.HomePage.scrollTop=scrollTop
				console.log(scrollTop)
				this.$router.push({path:'/details',query: {id}})
			},
			getbanner(){
				let _this=this
				_ajaxBanner().then(res=>{
					_this.bannerdata=[]
					_this.bannerdata=[].concat(res.data)
				})
			},
			getactivity(){
				let _this=this
				_ajaxCate().then(res=>{
					_this.activityArr=[]
					_this.activityArr=[].concat(res.data)
				})
			},
			async getgoodslist(){
				let _this=this
				this.toloading=true
				await _ajaxGoods({page:this.page,pageNum:6}).then(res=>{
					if(res.data.length>0){
						_this.goodListArr.push(...res.data)
					}else{
						_this.finished=true
					}
				})
				this.page++
				this.toloading=false
			},
			onLoad(){
				let _this=this
				setTimeout(() => {
					_this.getgoodslist()
				}, 2000);
				console.log("onload")
			}
		}
	}
</script>

<style scoped>
.mian{
    min-height: 100%;
    width: 100%;
}
.van-search{
    background-color: #f2f2f2 !important;
}
.van-search__content{
    background: #f8f8f8 !important;
    box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
}
.van-field__left-icon {
    display: none!important;
}
.searchicon{
    width: 18px;
    height: 18px;
}
input[type=search]{
    color: #333;
    caret-color:#333;
}
.van-field__control::placeholder{
    color: #999;
    font-family: "PingFang SC","Microsoft YaHei";
    font-size: 13px;
}
.van-field__control::-webkit-input-placeholder {
    color: #999;
    font-family: "PingFang SC","Microsoft YaHei";
    font-size: 13px;
}
.van-field__control::-moz-placeholder {
    color: #999;
    font-family: "PingFang SC","Microsoft YaHei";
    font-size: 13px;
}
.van-field__control::-ms-input-placeholder {
    color: #999;
    font-family: "PingFang SC","Microsoft YaHei";
    font-size: 13px;
}




.fullscroll{
    width: 100%;
    min-height: 95%;
}



/* .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    background-color: #39a9ed;
}

.van-swipe-item{
    height: 144px;
    width: 360px;
    margin: 0 auto;
}
.van-swipe__indicators{
    display: none;
} */



.goods-title-icon{
    width: 340px;
    margin: 0 auto;
}
.goods-title-icon-field {
    width: 77px;
    display: inline-block;
    margin: 0 auto;
}
.goods-title-icon-field>div{
    width: 77px;
    height: 53px;
}
.goods-title-icon-field-img{
    display: block;
    width: 53px;
    margin: 0 auto;
}
.goods-title-field{
    display: inline-block;
    width: 131px;
    height: auto;
}
.goods-title{
    width: 100%;
    text-align: center;
    margin-left: 20px;
    letter-spacing: 32px;
    font-size: 13px;
	font-family: "PingFang SC","Microsoft YaHei";
	font-weight: bold;
    color: #666;
}
.goods-title-hr{
    width: 100%;
    display: block;
    margin: 0;
    height: 14px;
    border-top: .5px solid #ccc;
}





.goot-list{
    width: 360px;
    margin:26px auto 0 auto;
}
.good-item{
    width: 176px;
    height: 240px;
    display: inline-block;
    background-color: #fff;
    margin: 0 0 13px 0;
    box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
}
.good-item:nth-child(2n){
    float: right;
    margin: 0 0 13px 0;
}
.good-item>img{
    width: 100%;
}
.good-item-img{
    width: 120px;
    height: 70px;
    background-position-x: center !important;
    background-repeat: no-repeat !important;
    background-position-y: bottom !important;
    background-size: 90px 60px !important;
    margin: 12px auto 13px auto;
}
.good-item-title{
    display: block;
    width: 100%;
    text-align: center;
    color: #333;
    font-size: 18px;
    font-family: 'PingFang SC','Microsoft YaHei';
    margin-top: 28px;
}
.good-name{
    display: block;
    text-align: center;
    color: #999;
    font-size: 10px;
    font-family: 'DINPro Medium';
}
.good-admin-pay{
    display: block;
    text-align: center;
    color: #999;
    font-size: 11px;
    font-family: 'PingFang SC','Microsoft YaHei';
}
.good-admin-pay-item{
    display: inline-block;
    color: #999;
    font-size: 11px;
    font-family: 'DINPro Medium';
}
.good-admin-pay-item > img{
    width:7px ;
    margin: 0 3px 3px 3px;
}
.good-go-pay{
    display: block;
    text-align: center;
    font-size: 13px;
    color: #333333;
    font-family: 'PingFang SC','Microsoft YaHei';
    margin-top: 3px;
}
.good-go-pay-item{
    display: inline-block;
    font-size: 13px;
    color: #fb1f36;
    font-family: 'DINPro-Bold';
    margin-top: 4px;
}
.good-go-pay-item>img{
    width: 7px;
    margin: 0 3px 3px 3px;
}



.callbackxxx{
    position: fixed !important;
    bottom: 47px;
    right: 17px;
    width: 50px;
    height: 50px;
}
</style>
